<template>
  <div id="GoodsType">
    <!-- 查询区域 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="类型名称">
        <el-input v-model="searchForm.typeName" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="类型级别">
        <el-select v-model="searchForm.level" placeholder="请选择类型级别">
          <el-option label="一级类型" value="1"></el-option>
          <el-option label="二级类型" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" class="el-icon-search"> 查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset" class="el-icon-refresh"> 重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div style="margin-bottom: 20px;">
      <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="onDeleteBatch">批量删除</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="typeId" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="typeName" label="类型名称" align="center"></el-table-column>
      <el-table-column prop="parentId" label="父级类型" align="center">
        <template slot-scope="scope">
          {{ parentType(scope.row.parentId) }}
        </template>
      </el-table-column>
      <el-table-column label="类型级别" align="center">
        <template slot-scope="scope">
          {{ getLevelText(scope.row.level) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="onEdit(scope.$index, scope.row)" class="el-icon-edit">修改</el-button>
          <el-button size="mini" type="text" @click="onDelete(scope.$index, scope.row)" class="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right;"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "GoodsType",
  data() {
    return {
      searchForm: {
        typeName: '',
        level: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0
    };
  },
  methods: {
    initTabl() {
      Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize})
      this.$axios.post("http://localhost:8090/product-type/getProductType", this.searchForm).then(({ data }) => {
        console.log(data);
        this.tableData = data.records;
        this.total = data.total;
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      })
    },
    onSearch() {
      this.initTabl();
      console.log('搜索:', this.searchForm);
    },
    onReset() {
      this.searchForm = { typeName: '', level: '' };
      this.initTabl();
    },
    onAdd() {
      console.log('新增');
    },
    onDeleteBatch() {
      console.log('批量删除');
    },
    onEdit(index, row) {
      console.log('编辑:', index, row);
    },
    onDelete(index, row) {
      console.log('删除:', index, row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTabl();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTabl();
    },
    getLevelText(level) {
      return level === 1 ? '一级类型' : level === 2 ? '二级类型' : '未知';
    },
    parentType(id) {
        let TypeName = '';
         for (let i = 0; i < this.tableData.length; i++) {
           if (this.tableData[i].typeId === id) {
             // eslint-disable-next-line no-unused-vars
             TypeName = this.tableData[i].typeName;
             break;
           }
         }
         return TypeName === '' ? '无' : TypeName;
    }
  },
  mounted() {
    this.initTabl();
  },
  computed: {

  }
};
</script>

<style scoped>
/* 添加一些样式以确保页面美观 */
.demo-form-inline {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}

</style>



